<!DOCTYPE html>
<html>
<head>
    <title>Image Processing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="index.js"></script>
    <style>
        canvas {
            border: 1px solid black;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h2>Image Processing Application</h2>
    <!-- Upload image function -->
    <input id="img_src" type="file" accept="image/*" />
    <input id="load_img_btn" type="button" onclick="loadImage()" value="Load" />

    <!-- Dropdown menu to select image processing operation -->
    <select id="image_op">
        <option value="to_grayscale">Convert to Grayscale</option>
        <option value="get_edge_canny">Get Edges (Canny)</option>
        <option value="get_corners">Get Corners</option>
    </select>
    <input type="button" id="process_img" value="Process Image" onclick="processImage()" />

    <br/><br/>
    <!-- Original Image -->
    <h3>Original Image</h3>
    <canvas id="local_canvas"></canvas>

    <!-- Processed Image -->
    <h3>Processed Image</h3>
    <canvas id="processed_canvas"></canvas>
</body>
</html>
